<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>

<body>
    <!--
        事件的基本使用:
        1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
        2.事件的回调需要配置在methods对象中，最终会在vm上,写在data里会做数据代理和数据劫持，但方法不需要数据代理，只需供别人调用;
        3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
        4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象,被Vue所管理的函数最好都写为普通函数;
        5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参,$event指的为事件对象;
    -->
    <div id="root">
        <h1>同学{{name}}</h1>
        <!-- <button v-on:click="showInfo1">按钮</button> -->
        <button @click="showInfo1">按钮1</button><!-- v-on:click简写为@click -->
        <button @click="showInfo2()">按扭2</button>
        <button @click="showInfo3(66,$event)">按扭3</button><!-- 不传参时()可写可不写，不写()此时配置项里的showInfo(e)默认自动传入事件对象,
                                                    写了()此时配置项里的showInfo(e)就不会自动传入事件对象了
                                                    传参时需写(66，$event)66表示传入的参数，$event表示事件对象此时需
                                                    将事件对象传入到配置项里 $event不写的话会将事件对象搞丢
                                                $event只是为了与event对象绑定，不然没法操作event对象，无论传不传，event对象始终是存在的-->
    </div>
</body>

<script>

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'mimi'
        },
        methods: {
            // showInfo: function () {
            //     alert('hello');
            // }
            showInfo1() {
                console.log(this);//此处的this表示vue实例vm，可理解为点击按钮时时vm帮你调用的showInfo1(vm.showInfo1())，若用箭头函数则为window
                //因为事件的回调需要配置在methods对象中，最终会在vm上
                alert('hello');
            },
            showInfo2(e) {
                console.log('事件对象：', e);
            },
            showInfo3(number, e) {
                console.log('传入的参数', number);
                console.log('事件对象', e);
            }

        }
    });
</script>

</html>